<template>
  <div>
    <Panel>
      <span slot="title">修改账号</span>

      <div slot="main">
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <!-- 原密码 -->
          <el-form-item label="原密码" prop="password">
            <el-input
              type="text"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 新密码 -->
          <el-form-item label="新密码" prop="newPass">
            <el-input
              type="text"
              v-model="ruleForm.newPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 确定新密码 -->
          <el-form-item label="确定新密码" prop="surePass">
            <el-input
              type="text"
              v-model="ruleForm.surePass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确定</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import { checkAcc, checkPass } from "@/utils/validate.js";
import { ModApi, accmodApi } from "@/api/user";
export default {
  data() {
    var validateAcc = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else if (!checkAcc(value)) {
        callback(new Error("请输入 6 到 12 位密码"));
      } else {
        // ajax验证旧密码
        ModApi({
          oldPwd: value,
        }).then((res) => {
          // console.log(value);
          //console.log(res.data);
          let { code, msg } = res.data;
          if (code == 200) {
            //console.log(msg);
            callback();
          } else {
            callback(new Error(msg));
          }
        });
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!checkPass(value)) {
        callback(new Error("请输入 6 到 12 位密码"));
      } else {
        if (this.ruleForm.surePass !== "") {
          this.$refs.ruleForm.validateField("surePass");
        }
        callback();
      }
    };
    var validatesurePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: "",
        newPass: "",
        surePass: "",
      },
      rules: {
        password: [{ validator: validateAcc, trigger: "blur" }],
        newPass: [{ validator: validatePass, trigger: "blur" }],
        surePass: [{ validator: validatesurePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 填写ajax
          // alert("填写ajax");
          accmodApi({
            newPwd: this.ruleForm.surePass,
          }).then((res) => {
            //console.log(res.data);
            let { code, msg } = res.data;
            if (code == 0) {
              // this.$message.success(msg);
              this.$router.push("/login");
            } 
            // else {
            //   this.$message.error(msg);
            // }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {
    Panel,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input {
  width: 300px;
}
</style>